<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>在HTML页面中使用路由</title>
</head>

<body>
    <div id="app">
        <!-- 步骤一：使用router-link组件设置导航链接，to属性用于指定链接的URL，组件会
被默认渲染成一个a标签，tag属性指定生成其他标签 -->
        <router-link to="/" tag="button">首页</router-link>
        <router-link to="/news">新闻</router-link>
        <router-link to="/books">图书</router-link>
        <!-- 步骤二：使用router-view组件设置组件渲染的地方，和router-link组件配套使
用，可以理解为占位符 -->
        <router-view></router-view>
    </div>
    <template id="tem1">
        <h2>这是首页</h2>
    </template>
    <template id="tem2">
        <h2>这是新闻页面</h2>
    </template>
    <template id="tem3">
        <h2>这是图书页面</h2>
    </template>
</body>

</html>
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
<!-- 引用Vue Router -->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
    /* 步骤三：定义路由组件 */
    const Home = {
        template: "#tem1"
    }
    const News = {
        template: "#tem2"
    }
    const Books = {
        template: "#tem3"
    }
    /* 步骤四：定义路由，需要和router-link组件中to属性一一对应 */
    const routes = [
        {
            path: "/",
            component: Home
        },
        {
            path: "/news",
            component: News
        },
        {
            path: "/books",
            component: Books
        }
    ]
    /* 步骤五：创建VueRouter实例 */
    const router = new VueRouter({
        routes
    })
    new Vue({
        el: "#app",
        /* 步骤六：在Vue根实例中使用routers选项注入上一步创建的VueRouter实例 */
        router: router,
    })
</script>